<template>
  <el-config-provider :locale="locale">
    <div id="app">
      <router-view/>
    </div>
  </el-config-provider>
</template>

<script>
import {ElConfigProvider} from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import {store} from "@/components/chart/common/store";
import {defineComponent, provide, watch, reactive} from "vue";

const zh = require("apexcharts/dist/locales/zh-cn.json");

export default defineComponent({
  components: {
    [ElConfigProvider.name]: ElConfigProvider,
  },
  setup() {
    Object.assign(store, JSON.parse(localStorage.getItem("globalStore")));
    const state = reactive(store)
    watch(() => state.darkMode, (newVal) => {
      document.getElementsByTagName("body")[0].className = newVal ? 'dark' : 'light';
      if (newVal) {
        window.Apex = {
          chart: {
            locales: [zh],
            defaultLocale: "zh-cn",
            foreColor: '#ffffff',
          },
          tooltip: {
            theme: 'dark'
          },
          grid: {
            borderColor: "#535A6C"
          }
        };
      } else {
        window.Apex = {
          chart: {
            locales: [zh],
            defaultLocale: "zh-cn"
          },
          tooltip: {
            theme: 'light'
          }
        }
      }
    }, {immediate: true})
    return {
      locale: zhCn
    }
  }
})
</script>

<style>
#app {
  font-family: Microsoft YaHei, Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  font-size: 14px;
  height: 100%;
}

html, body {
  height: 100%;
}

body {
  margin: 0 !important;
}
</style>
